<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <style type="text/css">
        body {
            display: flex;
            font-size: 2rem;
            overflow: hidden;
        }

        .Box{
            position: absolute;
            width: 50vw;
            height: 100vh;
            background-color: #fff;
        }
        .Box-2{
            position:absolute;
            left:50%;
            filter: blur(3vmin) contrast(100);
        }
        .Box-1 .BigCircle,
        .Box-1 .SmallCircle{
            background:#0ff;
        }
        .Box-1 .BigCircle{
            border-radius:40px;
            -webkit-transform:scale(0.9)
        }
        .Box-1 .SmallCircle{
            width: 11vmin;
            height: 11vmin;
            margin: -5.5vmin;
        }

        .BigCircle,
        .SmallCircle {
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: #40b4e0;
        }

        .BigCircle {
            width: 30vmin;
            height: 24vmin;
            margin: -15vmin;
            border-radius: 20px;
        }

        .SmallCircle {
            width: 15vmin;
            height: 15vmin;
            margin: -7.5vmin;
            background-color: #40b4e0;
            border-radius: 50%;
            animation: move 1.5s infinite alternate cubic-bezier(0.18, 0, 0.26, 1);
            --degree: 360deg;
        }





        @keyframes move {
            0% {
                transform: rotate(var(--degree)) translateY(0);
            }
            100% {
                transform: rotate(var(--degree)) translateY(-30vmin);
            }
        }

    </style>
</head>
<body>
<div class="Box Box-1">
    <div class="BigCircle"></div>
    <div class="SmallCircle"></div>
</div>
<div class="Box Box-2">
    <div class="BigCircle"></div>
    <div class="SmallCircle"></div>
</div>

</body>
</html>